<html>
<head>
    <meta http-equiv="content-type" content="text/html;charset=utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>商家收款</title>
    <style type="text/css">
        * { touch-action: pan-y; }
        body {
            margin: 0;
            padding: 0;
            background-color: #ededed;
            font-family: 微软雅黑;
        }

        .wrap {
            max-width: 600px;
            margin: 0 auto;
            position: absolute;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            width: 100%;
            height: 100%;
            overflow: hidden;
        }

        .box-pay {
            width: 100%;
            box-sizing: border-box;
            position: absolute;
            left: 0;
            top: 0;
            right: 0;
            bottom: 282px;
            background: #ededed;
        }

        .box-pay .title {
            color: #000;
            letter-spacing: 1px;
            padding: 36px 88px 10px 20px;
            margin: 0;
            position: absolute;
            width:100%;
            height: 130px;
            box-sizing: border-box;
            left: 0;
            top: 0;
            bottom: 0;
            right: 0;
            text-shadow: 0 0 10px rgba(0,0,0,0.1);
        }
        .box-pay .title img {
            width: 52px;
            height: 52px;
            position: absolute;
            right: 20px;
            top: 36px;
            border-radius: 6px;
        }
        .box-pay .title .label {
            height: 20px;
            line-height: 20px;
            font-size: 14px;
            color: #666;
            margin-bottom: 4px;
        }
        .box-pay .title .shopname {
            line-height: 28px;
            font-size: 28px;
            overflow: hidden;
            color: #171717;
            max-height: 56px;
        }

        .box-pay .input {
            padding: 30px 20px;
            position: absolute;
            width: 100%;
            box-sizing: border-box;
            left: 0;
            top: 130px;
            bottom: 0;
            right: 0;
            background: #fff;
            border-top-left-radius: 15px;
            border-top-right-radius: 15px;
        }

        .box-pay .input .label {
            height: 30px;
            line-height: 30px;
            font-size: 14px;
            color: #333;
            font-weight: 500;
            padding-left: 7px;
        }

        .box-pay .input .money {
            display: flex;
            align-items: center;
            box-sizing: border-box;
            border-bottom: 1px solid #eee;
            position: relative;
            height: 72px;
        }

        .box-pay .input .money .ic_money {
            width: 36px;
            height: 36px;
        }

        .box-pay .input .money span {
            height: 66px;
            line-height: 66px;
            font-size: 44px;
            font-weight: bold;
            color: #000;
            padding: 0 5px;
        }

        .box-pay .input .money .ic_cursor {
            width: 2px;
            height: 48px;
            animation: cursorImg 1s infinite steps(1, start);
        }

        @keyframes cursorImg {
            0%,
            100% {
                opacity: 0;
            }
            50% {
                opacity: 1;
            }
        }

        .remark {
            font-size: 13px;
            color: #999;
            width: 100%;
            margin: 20px 0;
            padding-left: 7px;
        }

        .remark .btn-edit-remark {
            padding-left: 10px;
            color: #006cdb;
        }

        .dialog-remark {
            width: 100%;
            height: 100%;
            position: fixed;
            top: 0;
            left: 0;
            background-color: rgba(0, 0, 0, 0.4);
            z-index: 2;
            display: flex;
        }

        .dialog-remark .dialog-body {
            width: 80%;
            height: 200px;
            background: #fff;
            z-index: 2;
            position: relative;
            margin: auto;
            border-radius: 5px;
        }

        .dialog-remark p {
            font-weight: bold;
            text-align: center;
            padding: 5px 0 5px 0;
            color: #494949;
        }

        .dialog-remark .input {
            text-align: center;
            margin-bottom: 20px;
        }

        .dialog-remark .input > textarea {
            width: 85%;
            height: 72px;
            font-size: 14px;
            margin: auto;
            outline: 0;
            border: 0;
            line-height: 20px;
            background-color: #f2f2f2;
            border-radius: 4px;
            padding: 8px;
            resize: none;
        }

        .dialog-remark .btn-remark-cancel {
            width: 50%;
            height: 44px;
            line-height: 44px;
            float: left;
            background: none;
            border: none;
            border-top: 1px solid #f0f0f0;
            font-weight: bold;
            font-size: 14px;
            outline: none;
            color: #494949;
        }

        .dialog-remark .btn-remark-confirm {
            width: 50%;
            height: 44px;
            line-height: 44px;
            float: left;
            background: none;
            border: none;
            border-top: 1px solid #f0f0f0;
            font-weight: bold;
            font-size: 14px;
            outline: none;
            border-left: 1px solid #f0f0f0;
            color: #38af53;
        }

        .keyboard {
            width: 100%;
            height: 300px;
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            background-color: #f4f6f8;
            padding: 30px 5px 10px 5px;
            box-sizing: border-box;
        }

        .keyboard table {
            width: 100%;
            height: 100%;
        }

        .keyboard td {
            vertical-align: middle;
            text-align: center;
            background: #fff;
            width: 25%;
            height: 16.66%;
            border-radius: 4px;
        }

        .keyboard td:active {
            background-color: #eee;
            opacity: 0.75;
        }

        .keyboard td.num {
            color: #000;
            font-size: 26px;
        }

        .keyboard td.finish {
            font-size: 18px;
            background: #38af53;
            color: #fff;
            writing-mode: lr-tb;
            padding: 0 20px;
        }
        .keyboard .brand {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 32px;
            line-height: 34px;
            font-size: 14px;
            color: #ccc;
            text-align: center;
            letter-spacing: 2px;
        }
    </style>
</head>
<body>

<div class="wrap">
    <input type="hidden" id="user_id" name="user_id">
    <div class="box-pay">
        <div class="title">
            <img src="{:mediaUrl('/static/pay/ic_shop_green.png')}">
            <div class="label">付款给</div>
            <div class="shopname">{$title}</div>
        </div>
        <div class="input">
            <div class="label">付款金额</div>
            <div class="money">
                <img class="ic_money" src="{:mediaUrl('/static/pay/ic_money_black.png')}">
                <span id="money"></span>
                <img class="ic_cursor" id="cursor" src="{:mediaUrl('/static/pay/ic_cursor_green.png')}">
            </div>
            <div class="remark" id="btn-add-remark" onclick="remarkEdit()">
                <span>添加备注</span>
            </div>
            <div class="remark" id="remark-content" style="display:none; color: #333;">
                <span>备注：</span>
                <span id="txt-remark"></span>
                <span id="btn-edit-remark" class="btn-edit-remark" onclick="remarkEdit()">修改</span>
            </div>
        </div>
    </div>

    <div class="keyboard">
        <div class="brand">微信支付 安全键盘</div>
        <table cellspacing="5" cellpadding="0" border="0">
            <tr>
                <td class="num" data-value="1">1</td>
                <td class="num" data-value="2">2</td>
                <td class="num" data-value="3">3</td>
                <td class="num" data-value="backspace"><img src="{:mediaUrl('/static/pay/ic_backspace.png')}" width="20"></td>
            </tr>
            <tr>
                <td class="num" data-value="4">4</td>
                <td class="num" data-value="5">5</td>
                <td class="num" data-value="6">6</td>
                <td rowspan="3" class="finish" data-value="enter">付款</td>
            </tr>
            <tr>
                <td class="num" data-value="7">7</td>
                <td class="num" data-value="8">8</td>
                <td class="num" data-value="9">9</td>
            </tr>
            <tr>
                <td colspan="2" class="num" data-value="0">0</td>
                <td class="num" data-value=".">.</td>
            </tr>
        </table>
    </div>
</div>
<div class="dialog-remark" id="dialog-remark" style="display:none;">
    <div class="dialog-body">
        <p>添加备注</p>
        <div class="input">
            <textarea type="text" id="input-remark" autocomplete="off" name="money" autofocus="autofocus" placeholder="最多输入30个字"></textarea>
        </div>
        <div>
            <button class="btn-remark-cancel" onclick="remarkCancel()">取消</button>
            <button class="btn-remark-confirm" onclick="remarkConfirm()">确定</button>
        </div>
    </div>
</div>
</body>

<script src="//res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
<script src="{:mediaUrl('/static/pay/jquery.min.js')}"></script>
<script>
    function doPay() {
        var openid = '{$openid}';
        var qrcode_id = '{$qrcode_id}';
        var money = $("#money").html();
        if (money == '') {
            return false;
        }
        var remark = $('#input-remark').val();
        $.ajax({
            url: "{:mobileUrl('/pay/qrcode/createOrder')}",
            data: {
                qrcode_id: qrcode_id,
                openid: openid,
                total_fee: money,
                remark: remark,
                pay_type: 'wxpay'
            },
            type: 'post',
            success: function (res) {
                if (res.errno) {
                    alert(res.msg);
                    return false;
                }
                wx.chooseWXPay({
                    timestamp: res.jsApiParameters.timeStamp,
                    nonceStr: res.jsApiParameters.nonceStr,
                    package:res.jsApiParameters.package,
                    signType: res.jsApiParameters.signType,
                    paySign: res.jsApiParameters.paySign,
                    success: function (res) {
                        //alert("支付成功")
                        window.location.href = "{:mobileUrl('/pay/qrcode/paySuccess', ['type'=>'wxpay'])}";
                    }
                });
            },
            error: function (error) {
                alert("网络错误");
                return false;
            }
        });
        return false;
    }

    var appid = '{$signPackage["appId"]}';
    var timestamp = '{$signPackage["timestamp"]}';
    var nonceStr = '{$signPackage["nonceStr"]}';
    var signature = '{$signPackage["signature"]}';
    wx.config({
        debug: false,
        appId: appid,
        timestamp: timestamp,
        nonceStr: nonceStr,
        signature: signature,
        jsApiList: [
            'checkJsApi',
            'updateAppMessageShareData',
            'hideOptionMenu',
            'showOptionMenu',
            'chooseWXPay',
            'hideMenuItems'
        ]
    });
    wx.ready(function () {
        wx.updateAppMessageShareData({
            title: '商家收款码',
            desc: '{$title}邀请你向他付款\n点击打开',
            link: "{:mobileUrl('/pay/qrcode/index', ['id' => $qrcode_id])}",
            imgUrl: "{:mediaUrl('/static/pay/wxpay_share.png?v=1', true)}"
        })
        wx.hideMenuItems({
            menuList: ['menuItem:copyUrl','menuItem:openWithQQBrowser','menuItem:openWithSafari','menuItem:share:email','menuItem:share:weiboApp','menuItem:favorite','menuItem:share:qq', 'menuItem:share:QZone']
        });
    });

    function remarkEdit() {
        $('#dialog-remark').show();
        setTimeout(() => {
            $('#input-remark').focus();
        }, 100)
    }

    function remarkConfirm() {
        var remark = $('#input-remark').val();
        if (remark != '') {
            $('#dialog-remark').fadeOut(200, function () {
                $('#btn-add-remark').hide();
                $('#remark-content').show();
                $('#txt-remark').html(remark);
            });
        } else {
            $('#dialog-remark').hide();
            $('#remark-content').hide();
            $('#btn-add-remark').show();
        }
    }

    function remarkCancel() {
        $('#dialog-remark').fadeOut(200);
    }

    $("#input-remark").bind("input propertychange", function () {
        var text = $("#input-remark").val();
        if (text.length > 30) {
            text = text.substring(0, 30)
            $("#input-remark").val(text)
        }
    });

    var deleteSi = 0;
    $("body").on("touchstart", ".keyboard td", function () {
        var btnValue = $(this).data('value');
        var money = $("#money").html();

        if(btnValue == "enter") {
            if(money == "" || parseFloat(money) <= 0) {
                return false;
            }
            doPay();
        } else if (btnValue == "backspace") {
            money = money.substring(0, money.length-1);
            $("#money").html(money);
            !deleteSi && (deleteSi = setInterval(function(){
                money = money.substring(0, money.length-1);
                $("#money").html(money);
            }, 150));
        } else {
            if(parseFloat(money) >= 999999) {
                return false;
            }
            if(btnValue == ".") {
                if(money.indexOf(".") <= 0) {
                    if(money) {
                        money += ".";
                    } else {
                        money = "0.";
                    }
                }
            } else {
                if(money.indexOf(".") <= 0 || money.split(".")[1].length < 2) {
                    if(money == "0") {
                        money = "";
                    }
                    if(money == "0.0" && btnValue == "0") {
                        return false;
                    }
                    money += btnValue;
                }
            }
            $("#money").html(money);
        }

    });

    $("body").on("touchend", ".keyboard td", function () {
        var btnValue = $(this).attr("data-value");
        if (btnValue == "backspace" && deleteSi) {
            clearInterval(deleteSi);
            deleteSi = 0;
        }
        setTimeout(() => {
            $("#money").focus();
        }, 100)
    });

    // 禁止页面下滑
    document.body.addEventListener('touchmove', function (e) {
        e.preventDefault();
    }, {passive: false});
</script>
</html>